<template>
	<view class="container">
		<view class="qrcode-container">
			<image class="qrcode" :src="imageStr"></image>
			<view class="logo-container">
				<view class="logo-box">
					<image class="logo" :src="getCurrentDriverAvatarOrDefault()" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { qrCodeImage } from '@/utils/qrcodeUtil.js'
import { useUserStore } from '@/stores/userStore.js'
import { WEB_URL } from '@/config/myConfiguration.js'
import { getCurrentDriverAvatarOrDefault } from '@/utils/imageUtil.js'

const driver = useUserStore()

const imageStr = ref('')

onMounted(() => {
	qrCodeImage(`${WEB_URL}/#/pages/invite/invite?id=${driver.getCurrentDriver().id}`).then(res => {
		imageStr.value = res
	})
})

</script>

<style lang="scss" scoped>

view {
	box-sizing: border-box;
}

.container {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	display: flex;
	justify-content: center;
	.qrcode-container {
		margin-top: 300rpx;
		width: 500rpx;
		height: 500rpx;
		position: relative;
		.qrcode {
			width: 100%;
			height: 100%;
		}
		.logo-container {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.logo-box {
				width: 140rpx;
				height: 140rpx;
				border: 10rpx solid #f8f8f8;
				background-color: #f8f8f8;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				.logo {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
		}
	}
}

</style>